
<template>
  <div class="userList">
    <header class="flex_btw header">
      <div>
        {{name}}
        <span v-if="taskType=='USERGROUPS'">分群用户明细</span>
      </div>
      <div>
        <el-date-picker
          @change="queryTable"
          v-model="searchTime"
          class="timePic"
          size="small"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>

        <el-button @click="listShow" size="small" plain>
          <i class="el-icon-s-unfold"></i>列目显示
        </el-button>
        <el-button size="small" plain @click="queryTable">
          <i class="el-icon-refresh"></i>刷新
        </el-button>
        <!-- <el-button size="small" plain>
          <i class="el-icon-s-cooperation"></i>保存用户分群
        </el-button>
        <el-button type="primary" size="small">
          <i class="el-icon-download"></i>下载
        </el-button> -->
      </div>
    </header>
    <section class="card_table">
      <el-table empty-text="暂无数据"   v-loading="tableLoading" :data="tableData" style="width: 100%">
        <el-table-column prop="id" width="160" :show-overflow-tooltip="true" fixed label="用户ID">
          <template slot-scope="scope">
            <div
              @click="routerChange('/userSelf/userBehaviorSequence',{},scope.row)"
              class="tableOne"
            >{{scope.row.userId}}</div>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          min-width="200"
          align="center"
          :tooltip-effect="true"
          v-for="_i in columns"
          :fixed="_i.fixed?true:false"
          :key="_i.propertyId"
          :prop="_i.propertyId"
          :label="_i.propertyName"
        >
          <template slot-scope="scope">
             {{scope.row[_i.propertyId]?scope.row[_i.propertyId]:'---'}}
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 50, 100]"
        :current-page="pageInfo.currentPage"
        class="page"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="currentChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </section>
    <!-- 列目显示弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      class="diglog_box"
      top="5vh"
      :visible.sync="listBool"
      width="50%"
    >
      <header slot="title">列目显示</header>
      <section class="flex_btw">
        <div class="chooseProp">
          <div class="onediv">
            <el-input
              v-model="searchPropList"
              placeholder="请输入内容"
              class="dialogInput"
              size="mini"
              clearable
            >
              <el-button @click="propListQuery" slot="append" size="mini" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div class="twodiv">
            <el-checkbox class="allChecked" v-model="allChecked">
              <span @click="allCheckedChange">全选</span>
            </el-checkbox>
            <el-checkbox-group v-model="dialogBox.computedList">
              <el-checkbox
                v-for="_i in dialogBox.allList"
                :key="_i.propertyKey"
                @change="listAddDel(_i)"
                :label="_i.propertyKey"
              >{{_i.propertyName}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="threediv">共{{dialogBox.allList.length}}项</div>
        </div>
        <div class="chooseProp">
          <div class="onediv">支持固定显示</div>
          <div class="twodiv">
            <div class="checkBox">
              <div class="itemblock" v-for="(_i,_in) in dialogBox.checkedList" :key="_i.vlaue">
                <span>{{_i.propertyName}}</span>
                <span>
                  <el-tooltip
                    v-if="!_i.fixed"
                    class="item"
                    effect="dark"
                    content="固定当前列"
                    placement="top"
                  >
                    <i @click="listItemChange(_in,'fixed')" class="el-icon-coordinate"></i>
                  </el-tooltip>
                  <el-tooltip
                    v-if="!_i.fixed"
                    class="item"
                    effect="dark"
                    content="取消显示"
                    placement="top"
                  >
                    <i @click="listItemChange(_in,'del')" class="el-icon-close"></i>
                  </el-tooltip>
                  <el-tooltip
                    v-if="_i.fixed"
                    class="item"
                    effect="dark"
                    content="取消固定"
                    placement="top"
                  >
                    <i @click="listItemChange(_in,'cancle')" class="el-icon-female"></i>
                  </el-tooltip>
                </span>
              </div>
            </div>
          </div>
          <div class="threediv">已选{{dialogBox.checkedList.length}}项</div>
        </div>
      </section>
      <footer slot="footer">
        <el-button size="small" @click="listChange(false)" plain>取消</el-button>
        <el-button type="primary" @click="listChange(true)" size="small">保存</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userList", // 用户列表
  watch: {},
  data() {
    return {
      name: "未知",
      // 查询入参
      productCode: null,
      appId: null,
      taskType: null,
      q: null,
      // end
      searchTime: [0, 0],
      pageInfo: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      searchPropList: "", // 列目查询关键字
      dialogBox: {
        allList: [],
        computedList: [],
        checkedList: [],
        searchAll: []
      }, // 类目穿梭框
      listBool: false, // 列目系显示弹框
      tableLoading: false,
      columns: [], // 表格显示列
      tableData: [] //  表格数据
    };
  },
  methods: {
    propListQuery() {
      let obj = JSON.parse(JSON.stringify(this.dialogBox));
      let allList = [];
      let computedList = [];
      obj.searchAll.map(_i => {
        if (_i.propertyName.indexOf(this.searchPropList) !== -1) {
          allList.push(_i);
          let bool = false;
          obj.computedList.map(_is => {
            if (_is == _i.propertyKey) {
              bool = true;
            }
          });
          if (bool) {
            computedList.push(_i.propertyKey);
          }
        }
      });
      obj.allList = allList;
      obj.computedList = computedList;
      this.dialogBox = obj;
    }, // 穿梭框搜索
    allCheckedChange() {
      if (this.allChecked) {
        this.dialogBox.checkedList = [];
        this.dialogBox.computedList = [];
      } else {
        this.dialogBox.computedList = [];
        this.dialogBox.checkedList = JSON.parse(
          JSON.stringify(this.dialogBox.allList)
        );
        JSON.parse(JSON.stringify(this.dialogBox.allList)).map(_i => {
          this.dialogBox.computedList.push(_i.propertyKey);
        });
      }
    }, // 穿梭框全选点击
    async getUserPropertyList() {
      let _res = await this.$analysisApi.userAnalysis.userPropertyList({
        appId: this.appId,
        productCode: this.productCode
      });
      if (_res&&_res.success) {
        let _arr_t = [];
        _res.value.userPropertyList.map(_i=>{
          if(_i.propertyId!=='user_id'){
            _arr_t.push(_i)
          }
        })
        this.dialogBox = {
          allList: JSON.parse(JSON.stringify(_arr_t)),
          searchAll: JSON.parse(JSON.stringify(_arr_t)),
          computedList: JSON.parse(JSON.stringify(_arr_t)),
          checkedList: JSON.parse(JSON.stringify(_arr_t))
        };
      }
      // 初始化表格显示列
      this.columns = [];
      JSON.parse(JSON.stringify(_res.value.userPropertyList)).map(_i => {
        _i.fixed = false;
        this.columns.push(_i);
      });
      this.queryTable();
    }, // 获取全部用户属性
    async queryTable() {
      this.tableLoading = true;
      let profiles = [];
      this.columns.map(_i => {
        profiles.push(_i.propertyKey);
      });
      let obj = {
        pageSize: this.pageInfo.pageSize,
        currentPage: this.pageInfo.currentPage,
        appId: this.appId,
        upperTaskType: this.taskType,
        upperTaskData: this.q,
        fromDate: this.searchTime[0],
        toDate: this.searchTime[1],
        profiles: profiles
      };
      let res = await this.$userSelf.usersReportList(obj);
      this.tableLoading = false;
      if (res&&res.success) {
        this.pageInfo.total = res.value.total;
        let _arr = [];
        res.value.list.map(_i => {
          let item = {
            userId: _i.userId,
            deviceId: _i.deviceId
          };
          Object.keys(_i.profiles).forEach(function(key) {
            item[key.split(".")[1]] = _i.profiles[key];
          });
          _arr.push(item);
        });
        this.tableData = _arr;
        // this.tableData = [
        //   {
        //     userId: "killer",
        //     deviceId: "基拉", // 设备id
        //     profiles: {
        //       _first_visit_time: "江西",
        //       _utm_term: 20,
        //       _first_traffic_source_type: "1986"
        //     }
        //   }
        // ];
      }
    },
    handleSizeChange(v) {
      this.pageInfo.pageSize = v;
      this.queryTable();
    },
    currentChange(v) {
      this.pageInfo.currentPage = v;
      this.queryTable();
    },
    // 表格查询函数
    routerChange(path, obj, item) {
      if (path.indexOf("/userSelf") !== -1) {
        obj.productCode = this.productCode;
        obj.appId = this.appId;
        obj.taskType = this.taskType;
        obj.q = JSON.stringify(this.q);
        obj.deviceId = item.deviceId;
        obj.userId = item.userId;
        obj.name = this.name
      }
      this.$router.push({
        path: path,
        query: obj
      });
    }, // 路由跳转
    listItemChange(index, type) {
      let obj = JSON.parse(JSON.stringify(this.dialogBox));
      let propertyKey = obj.checkedList[index].propertyKey;
      let computedList = [];
      switch (type) {
        case "fixed": // 固定显示列
          obj.checkedList[index].fixed = true;
          break;
        case "del": // 取消显示列
          computedList = obj.computedList.filter(_i => {
            return _i !== propertyKey;
          });
          obj.computedList = computedList;
          obj.checkedList.splice(index, 1);
          break;
        case "cancle": // 取消固定显示
          obj.checkedList[index].fixed = false;
          break;
      }
      this.dialogBox = obj;
    }, // 穿梭框右侧操作
    listAddDel(item) {
      let checkedList = JSON.parse(JSON.stringify(this.dialogBox.checkedList));
      let bool = false;
      let index = -1;
      checkedList.map((_i, _in) => {
        if (_i.propertyKey == item.propertyKey) {
          bool = true;
          index = _in;
        }
      });
      if (bool) {
        checkedList.splice(index, 1);
      } else {
        checkedList.push(item);
      }
      this.dialogBox.checkedList = checkedList;
    }, // 穿梭框左侧操作
    listShow() {
      let obj = JSON.parse(JSON.stringify(this.dialogBox));
      obj.checkedList = JSON.parse(JSON.stringify(this.columns));
      obj.computedList = [];
      this.columns.map(_i => {
        obj.computedList.push(_i.propertyKey);
      });
      obj.allList = JSON.parse(JSON.stringify(obj.searchAll));
      this.searchPropList = "";
      this.dialogBox = obj;
      this.listBool = true;
    },
    listChange(bool) {
      this.listBool = false;
      if (bool) {
        this.columns = JSON.parse(JSON.stringify(this.dialogBox.checkedList));
      }
      this.dialogBox.checkedList = [];
      this.pageInfo.currentPage = 1;
      this.queryTable();
    }, // 列目显示保存
    time_change(time) {
      let date = new Date(time); //获取一个时间对象
      let year = date.getFullYear(); // 获取完整的年份(4位,1970)
      let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      mon = mon < 10 ? "0" + mon : mon;
      let day = date.getDate(); // 获取日(1-31)
      day = day < 10 ? "0" + day : day;
      return year + "-" + mon + "-" + day;
    } // 时间戳转换函数
  },
  created() {
    let { productCode, appId, taskType, q, name } = this.$route.query;
    this.name = name ? name : this.name;
    this.productCode = productCode;
    this.appId = appId;
    this.taskType = taskType;
    this.q = JSON.parse(q);
    this.searchTime = [
      this.time_change(new Date() - 7 * 24 * 60 * 60 * 1000),
      this.time_change(new Date())
    ];
    this.getUserPropertyList(); // 获取用户属性，用于类目显示
    // 查询分群详情
  },
  mounted() {},
  components: {},
  computed: {
    // 穿梭框全选绑定值
    allChecked() {
      if (this.dialogBox.allList.length == this.dialogBox.checkedList.length) {
        return true;
      }
      return false;
    }
  }
};
</script>
<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.timePic {
  width: 340px;
  height: 36px;
  margin: 0;
  position: relative;
  bottom: 2px;
}
// 规则创建弹框  Box
.diglog_box {
  header {
    height: 0.38rem;
    line-height: 0.38rem;
    letter-spacing: 1px;
    font-size: 0.24rem;
  }
  section {
    .chooseProp {
      width: 49%;
      height: 8rem;
      border: 1px solid #e0e6ed;
      border-radius: 3px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      ::v-deep .el-input {
        border: none !important;
      }
      ::v-deep .el-input__inner {
        border: none !important;
      }
      .onediv {
        width: 100%;
        border-bottom: 1px solid #e0e6ed;
        height: 0.5rem;
        display: flex;
        align-items: center;
        text-indent: 10px;
        color: #8492a6;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        font-size: 12px;
      }
      .twodiv::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .twodiv {
        width: 88%;
        height: 7rem;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
        .checkBox {
          width: 100%;
          padding: 10px 4px;
          margin: 0 auto;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          justify-content: flex-start;
          .itemblock {
            width: 100%;
            height: 39px;
            padding: 0 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            i {
              opacity: 0;
              color: rgb(62, 81, 113);
              font-size: 16px;
              font-weight: 600;
              margin: 0 0 0 16px;
            }
            i:hover {
              color: #00bf8a;
            }
            .el-icon-female {
              opacity: 1;
            }
          }
          .itemblock:hover {
            background: rgba($color: #307ef2, $alpha: 0.04s);
            i {
              opacity: 1;
            }
          }
        }
        .allChecked {
          padding: 0px 4px;
          margin: 10px 0 0;
        }
        .el-checkbox-group {
          padding: 10px 4px;
          width: 100%;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          justify-content: flex-start;
          .el-checkbox {
            margin: 10px 0;
          }
        }
      }
      .threediv {
        width: 100%;
        border-top: 1px solid #e0e6ed;
        height: 0.5rem;
        display: flex;
        align-items: center;
        text-indent: 16px;
        color: #8492a6;
        font-size: 12px;
      }
    }
  }
  footer {
    height: 0.38rem;
  }
}
.tableOne {
  cursor: pointer;
  color: #307ef2;
  text-indent: 6px;
  font-size: 16px;
}
.userList {
  width: 96%;
  margin: 0px auto;
  .header {
    width: 100%;
    height: 70px;
    div:nth-child(1) {
      white-space: nowrap;
      word-wrap: break-word;
      word-break: break-all;
      font-size: 24px;
      color: #1f2d3d;
      span {
        font-size: 14px;
        margin: 0 10px;
        color: #778ca2;
      }
    }
    div:nth-child(2) {
      .el-button {
        margin: 0 0 0 10px;
        i {
          font-size: 0.23rem;
          margin-right: 4px;
        }
      }
    }
  }
  section {
    .page {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
